<template>
  <div style="padding-bottom: 20px">
    <el-table :data="tableData" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)" class="row-main-table">
      <el-table-column prop="cardNumber" label="业务号码" align="center"></el-table-column>
      <el-table-column prop="dictPreStatusName" label="操作前状态" align="center"></el-table-column>
      <el-table-column prop="dictOperaStatusName" label="操作状态" align="center"></el-table-column>
      <el-table-column prop="dictStatusName" label="最终状态" align="center"></el-table-column>
      <el-table-column prop="reason" label="操作原因" align="center"></el-table-column>
      <el-table-column prop="insertTime" label="操作时间" align="center"></el-table-column>
      <el-table-column prop="flag" label="状态" align="center">
        <template v-slot="{ row, rowIndex }">
          <div :style="{color:row.flag?'green':'red'}">{{row.flag?'操作成功！':'发生错误！'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template v-slot="{ row, rowIndex }">
          <el-button type="primary" @click="showDetail(row)" :loading="buttonRetryLoading">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="row-main-pager"
      :current-page.sync="page.current"
      :page-size="page.size"
      :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"
      background></el-pagination>

  </div>
</template>

<script>
  import {changeLogList} from '@/api/getData'

  export default {
    name: "index",
    data() {
      return {
        loading: false,
        tableLoading: false,
        buttonRetryLoading: false,
        tableData: [],
        page: {
          current: 1,
          size: 10,
          total: 0
        }
      }
    },
    created() {
      this.findList()
    },
    methods: {
      findList() {
        this.loading = true;
        this.tableLoading = true;
        if (this.flag == '') {
          this.flag = null
        }
        if (this.cardNumber == '') {
          this.cardNumber = null
        }
        changeLogList({page: this.page, cardNumber: this.cardNumber, flag: this.flag}).then(response => {
          let ct = response.data.content;
          let res = ct.map(v => {
            v.insertTime = v.insertTime.replace("T", " ")
            return v
          })
          this.tableData = res;
          this.page.total = response.data.totalElements
          this.loading = false;
          this.tableLoading = false
        }).catch(e => {
          this.loading = false;
          this.tableLoading = false
        })
      },
      handleCurrentChange(currentPage) {
        this.page.current = currentPage;
        this.findList()
      },
      handleSizeChange(pageSize){
        this.page.current = 1;
        this.page.size = pageSize;
        this.findList()
      },
      showDetail(row) {
        const h = this.$createElement;
        this.$msgbox({
          title: '查看详情',
          message: h('div', {style: "display:flex;flex-direction: column;white-space:pre-wrap;word-wrap : break-word ;"}, [
            h('span', null, '业务号码：' + row.cardNumber),
            h('span', null, '操作状态：' + row.dictOperaStatus),
            h('span', null, '原因：' + row.reason),
            h('span', null, '最终状态：' + row.dictStatus),
            h('span', null, '请求：' + row.reqBody),
            h('span', null, '响应：' + row.repBody)

          ]),
          confirmButtonText: '确定',

          beforeClose: (action, instance, done) => {
            done();
          }
        }).then(action => {

        });
      }

    },
    props: {
      cardNumber: {
        type: String,
        default: ''
      },
      flag: {
        type: String,
        default: ''
      }
    }
  }
</script>

<style scoped>

</style>
